<script setup>
import { ref } from 'vue'
import { getShowData, delShowData } from '../../api/loop'
const showdata = ref([])
getShowData()
    .then((res) => {
        showdata.value = res.data.data
        console.log(res);
    })
function delData(id) {
    console.log(id);
    delShowData({ id: id })
        .then((res) => {
            console.log(res);
            getShowData()
                .then((res) => {
                    showdata.value = res.data.data
                    console.log(res);
                })
        })

}
</script>
<template>
    <el-table :data="showdata" style="width: 100%">
        <el-table-column label="序号" type="index" :index="1" />
        <el-table-column label="编号" prop="id" />
        <el-table-column label="图片">
            <template #default="scope">
                <img :src="scope.row.url" alt="">
            </template>
        </el-table-column>
        <el-table-column prop="location" label="地点" width="180" />
        <el-table-column prop="date" label="时间" width="180" />
        <el-table-column prop="place" label="地址" width="180" />
        <el-table-column prop="star" label="热度" width="180" />
        <el-table-column label="是否开售">
            <template #default="scope">      
                    <el-switch v-model="scope.row.isshow" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        active-value="1" inactive-value="0" />
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button @click="delData(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
<style scoped>
img {
    width: 100px;
    height: 100px;
}
</style>